<%-- 
    Document   : NextPage
    Created on : 09/05/2010, 09:42:06
    Author     : rodrigo e guilherme
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>YQL - MiniCurso</title>
        <script  type="text/javascript" src="jquery.js"> </script>
        <script  type="text/javascript" src="jquery-ui.js"> </script>
        <link href="jquery-ui.css" rel="stylesheet">
        <style type="text/css">
            h3 { text-align: center; margin: 0; }
            .ui-resizable-helper { border: 1px dotted gray; }
            .ui-effects-transfer { border: 2px dotted gray; }
            #dFoto {
                width: 260px; height: 260px; padding: 0.5em;
            }

        </style>

    </head>
    <body>
        <script>
            $(document).ready(function(){
                $(function() {
                    $("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
                    $("div").each(function(){
                        if ($(this).attr("id") == "dFoto") {
                            $(this).draggable();
                            $(this).css("border", "1px red solid");
                        }
                    });
                    function runEffect(){
                        //get effect type from
                        var selectedEffect = "blind";
                        //most effect types need no options passed by default
                        var options = {};
                        //run the effect
                        $("#tabs").effect(selectedEffect,options,500,callback);
                    };
                    //callback function to bring a hidden box back
                    function callback(){
                        setTimeout(function(){
                            $("#tabs").removeAttr('style').hide().fadeIn();
                        }, 1000);
                    };
                    runEffect();
                });
            });
        </script>

        <%
                    String username = request.getParameter("username");
                    yqlweb.persistencia.Persistencia persist = new yqlweb.persistencia.Persistencia();
                    yqlweb.modelo.PerfilTwitter perfil = persist.obterPerfilTwitter(username);
                    java.util.List<yqlweb.modelo.Foto> fotos = null;
                    yqlweb.modelo.Clima clima = null;
                    if (perfil != null) {
                        fotos = persist.obterFotosPorDescricao(perfil.getLocalizacao(), 15);
                        clima = persist.obterClimaPorLocalizacao(perfil.getLocalizacao());

                        out.println("<h3 class='ui-widget-header'>Username: " + perfil.getUsername());
                        out.println("Localização: " + perfil.getLocalizacao());
                        out.println("</h3>");
        %>
        <div id="tabs">
            <ul>
                <li><a href="#tPrincipal">Principal</a></li>
                <li><a href="#tFotos">Fotos</a></li>

            </ul>
            <div id="tPrincipal">
                <%
                                if (clima != null) {
                                    out.println("<br>" + clima.getDescricao());
                                }
                %>
            </div>
            <div id="tFotos">
                <%
                                if (fotos != null) {
                                    for (int i = 0; i < fotos.size(); i++) {
                                        out.println("<div id='dFoto' class='ui-widget-content' style='float:left' >");
                                        out.println("<img src='" + fotos.get(i).getUrl().trim() + "' width='256' height='256' border='0' alt='" + fotos.get(i).getTitulo() + "' >");
                                        out.println("</div>");
                                    }
                                }%>
            </div>

        </div>
        <%
                    } else {
                        out.println("<center><br> Usuario não encontrado</center>");
                    }
        %>

    </body>
</html>
